<template>
  <div>
    <div class="xsd" v-if="this.list.title">
      <div class="top">
        <div class="topbox">
          <div class="left" @click="$router.back()">
            <van-icon name="arrow-left" />
          </div>
          <!-- @click="addCart(book)" -->
          <h2>{{ this.list.title }}</h2>
          <div class="right">
            <!-- <van-icon name="star-o" /> -->
            <div>
              <van-icon name="star-o" v-if="!isCollection" @click="addGuan()" />
              <van-icon name="star" v-else @click="minusGuan(list.cook_id)" />
            </div>

            <p class="iconc">
              <van-icon name="share-o" @click="showShare = true" />
            </p>
            <div style="height: 30rem">
              <van-share-sheet
                v-model="showShare"
                title="分享"
                :options="options"
                @select="onSelect"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="imag">
        <!-- <img :src="this.list.photo_path" alt="" /> -->
        <img style="height: 180px" :src="this.list?.photo_path" v-image-preview>
        
      </div>
      <div class="name">{{ this.list?.title }}</div>
      <p class="shoucang">{{ this.list?.views_count_text }}人浏览</p>
      <p class="shoucang">
        <a :href="this.list?.nutrition_facts_hint_text_url" class="shoucang">{{
          this.list?.cookstory
        }}</a>
      </p>
      <h4>用料</h4>
      <div class="peiliao" v-for="text in get" :key="text.id">
        <div class="cai">
          <div class="what">
            <p>{{ text.title }}</p>
          </div>
          <div class="how">
            <p>{{ text.note }}</p>
          </div>
        </div>
      </div>
      <div class="do" v-for="cook in make" :key="cook.id">
        <div class="image">
          <!-- <img :src="cook.image" alt="" /> -->
          <img style="height: 180px" :src="cook.image" v-image-preview>
        </div>
        <p>{{ cook.content }}</p>
      </div>
    </div>
    <div class="xsd" style="height: 600rem;" v-if="!this.list.title">
      <h1 @click="$router.back()">
        <van-empty image="search" description="搜索中" />
      </h1>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import Vue from "vue";
import { Skeleton } from "vant";

Vue.use(Skeleton);
// Vue.use(ShareSheet);
export default {
  computed: {
    isCollection: function () {
      const arr =
        this.cookids.filter((o) => {
          return o.cid === this.list.cook_id;
        }) || [];
      return arr.length > 0 ? true : false;
    },
  },
  data() {
    return {
      // id: {},
      list: [],
      get: [],
      make: [],
      cookids: JSON.parse(window.localStorage.getItem("cookids")) || [],
      //历史搜索记录，存本地
      showShare: false,
      options: [
        { name: "分享至微信", icon: "wechat" },
        { name: "分享至朋友圈", icon: "wechat-moments" },
        { name: "分享至QQ", icon: "qq" },
      ],
      
    };
  },

  created() {
    this.axios
      .get(
        "https://apis.netstart.cn/douguo/recipe/detail/" + this.$route.query.id
      )
      .then((res) => {
        this.list = res.data.result.recipe;
        this.get = res.data.result.recipe.major;
        this.make = res.data.result.recipe.cookstep;
      });
  },
  methods: {
    change(index) {
      this.changeRed = index;
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    
    // getid() {
    //   this.id = this.$route.query.id;
    //   // 进行值存储判断他是否为undefined
    //   if (this.id === undefined) {
    //     this.id = JSON.parse(sessionStorage.getItem("id"));
    //   } else {
    //     sessionStorage.setItem(
    //       "id",
    //       JSON.stringify(this.$route.query.id)
    //     );
    //   }
    // },

    addGuan() {
      this.cookid = this.list.cook_id;
      // console.log("this.cookid", this.cookid);
      this.cookids = [
        {
          cid: this.cookid,
        },
        ...this.cookids,
      ];
      // console.log(this.cookids);
    },
    minusGuan(id) {
      //删除历史记录当前项

      this.cookids = this.cookids.filter((o) => o.cid !== id);
    },
  },
  watch: {
    cookids: function (newCookids) {
      // console.log(newCookids);
      window.localStorage.setItem("cookids", JSON.stringify(newCookids));
    },
  },
};
</script>

<style lang="scss" scoped>
.xsd {
  width: 100vw;
  // height: 100vh;
  box-sizing: border-box;
  h1 {
    font-size: 18rem;
    text-align: center;
    line-height: 580rem;
  }
}
.top {
  background-color: #f5f5f5;
  width: 100vw;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  .topbox {
    // width: 100vw;
    box-sizing: border-box;
    height: 8vh;
    line-height: 8vh;
    display: flex;
    justify-content: space-between;
    padding: 2rem 0 0 10rem;
    .left {
      font-size: 25rem;
    }
    .right {
      width: 60rem;
      display: flex;
      align-items: center;
      font-size: 25rem;
      margin-top: -12rem;
      .icon {
        padding: 0;
        margin-right: 5rem;
      }
    }
  }
}
.van-cell {
  width: 30rem;
  padding: 0;
  margin-top: 40rem;
}
.name {
  margin: 10rem 10rem;
  font-size: 18rem;
  font-weight: 700;
}
.shoucang {
  margin: 10rem 10rem;
  font-size: 14rem;
}
a {
  text-decoration: none;
  color: #717171;
}
.imag {
  margin: 50rem auto 0;
  width: 95vw;
  height: 180rem;
  img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
}
h4 {
  margin-top: 10rem;
  font-size: 16rem;
  margin-left: 10rem;
  color: #717171;
  font-weight: 700;
}
p {
  margin: 5rem 0 0 0;
  color: #777777;
}
.peiliao {
  .cai {
    width: 65vw;
    display: flex;
    text-align: start;
    font-size: 14rem;
    margin: 5rem 0 10rem 10rem;
    .what {
      width: 50%;
    }
    .how {
      width: 50%;
    }
  }
}
.do {
  padding-bottom: 30rem;
  .image {
    margin: 0 auto;
    width: 95vw;
    height: 180rem;
    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;

      // transform:scale(.5);
    }
  }
  p {
    margin: 10rem 0 10rem 10rem;
    color: #424242;
    font-size: 14rem;
    font-weight: 500;
  }
}
</style>
